<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加子任务"
    width="50%"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="任务标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入任务标题"></el-input>
      </el-form-item>
      
      <el-form-item label="任务描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          rows="3"
          placeholder="请输入任务描述"
        ></el-input>
      </el-form-item>
      
      <el-form-item label="父任务" prop="parent_task_id">
        <el-select
          v-model="form.parent_task_id"
          placeholder="请选择父任务"
          clearable
        >
          <el-option
            v-for="task in parentTasks"
            :key="task.id"
            :label="task.title"
            :value="task.id"
          ></el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label="是否为原子任务" prop="is_atomic">
        <el-switch v-model="form.is_atomic"></el-switch>
      </el-form-item>
      
      <el-form-item label="预估工时(小时)" prop="estimated_hours">
        <el-input-number
          v-model="form.estimated_hours"
          :min="0.5"
          :max="100"
          :step="0.5"
        ></el-input-number>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { useStore } from 'vuex'

const store = useStore()
const dialogVisible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const parentTasks = ref([])

// 表单数据
const form = reactive({
  title: '',
  description: '',
  parent_task_id: null,
  is_atomic: false,
  estimated_hours: 1
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入任务标题', trigger: 'blur' },
    { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入任务描述', trigger: 'blur' }
  ],
  estimated_hours: [
    { required: true, message: '请输入预估工时', trigger: 'blur' },
    { type: 'number', min: 0.5, message: '最小工时为0.5小时', trigger: 'blur' }
  ]
}

// 打开对话框
const show = async (data) => {
  try {
    // 获取可选的父任务列表
    const response = await store.dispatch('fetchTaskSubtasks', data.taskId)
    if (response) {
      parentTasks.value = response
    }
    
    dialogVisible.value = true
  } catch (error) {
    console.error('获取父任务列表失败:', error)
    ElMessage.error('获取父任务列表失败')
  }
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    
    loading.value = true
    await store.dispatch('addSubtask', {
      ...form
    })
    
    ElMessage.success('添加子任务成功')
    dialogVisible.value = false
    
    // 重置表单
    formRef.value.resetFields()
  } catch (error) {
    console.error('添加子任务失败:', error)
    ElMessage.error('添加子任务失败')
  } finally {
    loading.value = false
  }
}

defineExpose({
  show
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style> 